import React, { Component, lazy, Suspense } from "react";
// import命令是会同步引入的
// import Child from "./Child";

// lazy要接收一个回调函数，返回import函数
// 可以用来做组件的懒加载
const Child = lazy(() => import("./Child.jsx"));

// 必须要配合Suspense组件一起使用
// Suspense必须要由一个fallback属性，当组件还没有加载出来的时候的暂时的显示

const Fallback = () => {
  return <div>loading...</div>;
};

class App extends Component {
  state = {
    show: false,
  };
  fn = () => {
    this.setState({
      show: true,
    });
  };

  render() {
    return (
      <>
        <h3>react异步加载</h3>
        <button onClick={this.fn}>btn</button>
        <Suspense fallback={<Fallback />}>
          {this.state.show && <Child></Child>}
        </Suspense>
      </>
    );
  }
}

export default App;
